<template>
  <div id="editor">
    <shape
      v-for="(component,index) in components"
      :key="index"
      :active="index === currentIndex"
      @move="args => move(args,index)"
      @unmove="unmove"
      v-model="components[index]">
      <component
        @click="select(index)"
        :is="component.name"
        :style="getComponentStyle(component)"
        :propValue="component.propValue"
      >{{ component.text }}
      </component>
    </shape>

    <MarkLine ref="markLine" @setShapePosStyle="setCurrentShapePos" />
  </div>
</template>

<script>
import Shape from './Shape'
import MarkLine from './MarkLine'
import getStyle from '@/utils/style'

export default {
  name: 'Test',
  components: {
    Shape,
    MarkLine
  },
  data () {
    return {
      components: [{
        name: 'el-button',
        propValue: {},
        text: 'default',
        width: 100,
        height: 34,
        top: 0,
        left: 0
      }, {
        name: 'el-button',
        propValue: {},
        text: 'default',
        width: 100,
        height: 34,
        top: 0,
        left: 120
      }],
      currentIndex: null
    }
  },
  methods: {
    select (index) {
      this.currentIndex = index
    },
    move ({ dragNode, isDownward, isRightward }, index) {
      this.select(index)
      this.$refs.markLine.showLine(dragNode, isDownward, isRightward)
    },
    unmove () {
      this.$refs.markLine.hideLine()
    },
    setCurrentShapePos ({ key, value }) {
      if (!key || !value || !this.components[this.currentIndex]) return false
      this.components[this.currentIndex][key] = value
    },
    getComponentStyle (style) {
      return getStyle(style, [])
    }
  }
}
</script>

<style scoped lang="scss">
.editor {
  position: relative;
  background: #fff;
}

.edit {
  .component {
    outline: none;
    width: 100%;
    height: 100%;
  }
}
</style>
